<template>
  <div>
    <div v-if="cities.length">
      <van-nav-bar left-arrow @click-left="onClickLeft">
        <template #title>
          <div style="color: #fff">城市列表</div></template
        ></van-nav-bar
      >
      <div v-if="cities.length">
        <van-index-bar :index-list="indexList">
          <van-index-anchor index="#">当前城市</van-index-anchor>
          <van-cell :title="$store.state.user.currentCity" />
          <van-index-anchor index="热">热门城市</van-index-anchor>
          <van-cell
            :title="item.city"
            v-for="item in popularCities"
            :key="item.value"
            @click="handoff(item)"
          />
          <div v-for="each in cities" :key="each.text">
            <van-index-anchor :index="each.text">{{
              each.text
            }}</van-index-anchor>
            <van-cell
              :title="item.city"
              v-for="item in each.cityList"
              :key="item.value"
              @click="handoff(item)"
            />
          </div>
        </van-index-bar>
      </div>
    </div>
    <PageLoading v-else></PageLoading>
  </div>
</template>

<script>
import PageLoading from '@/components/public/PageLoading.vue'
import { getCity } from '@/api/article'

export default {
  name: 'cities-page',
  components: {
    PageLoading
  },
  async created () {
    const { body } = await getCity(this.leven)
    body.sort((a, b) => a.short.localeCompare(b.short))
    const result = body.reduce((prev, item) => {
      const letter = item.short.charAt(0).toUpperCase()
      const index = prev.findIndex(item => item.text === letter)
      if (index === -1) {
        prev.push({
          text: letter,
          cityList: [{ city: item.label, value: item.value }]
        })
      } else {
        prev[index].cityList.push({ city: item.label, value: item.value })
      }
      return prev
    }, [])
    this.cities = result
  },
  data () {
    return {
      leven: 1,
      cities: [],
      popularCities: [
        {
          city: '北京',
          value: 'AREA|88cff55c-aaa4-e2e0'
        },
        {
          city: '广州',
          value: 'AREA|e4940177-c04c-383d'
        },
        {
          city: '上海',
          value: 'AREA|dbf46d32-7e76-1196'
        },
        {
          city: '深圳',
          value: 'AREA|a6649a11-be98-b150'
        }
      ],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    handoff (data) {
      this.$store.commit('user/addCount', data)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #15b572;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
</style>
